<template>
<div class="layout-container flex-center">
		<div class="pixiContainer">
			<div class="topHead">
				<div class="sysName">
					<div class="timeNow">{{ parseTime(nowTime) }}</div>
					<div class="rightPart">
						<div class="partModule" @click="goToBackSys">进入后台</div>
						<div class="partModule" @click="goOutHandler">退出</div>
					</div>
				</div>
			</div>
			<div class="mainWrap">
			</div>
		</div>
	</div>
</template>
<script setup lang='ts'>
import { reactive, watch, ref } from 'vue'
import { NextLoading } from '/@/utils/loading';
import { ElMessageBox, ElMessage } from 'element-plus';
import { Session, Local } from '/@/utils/storage';
import { useI18n } from 'vue-i18n';
import { logout } from '/@/api/login';

const { locale, t } = useI18n();
const router = useRouter();
const nowTime = ref(new Date());

setInterval(() => {
	nowTime.value = new Date();
}, 1000);

// 跳往后台系统
const goToBackSys = () => {
	router.push('/home');
};

// 退出系统
const goOutHandler = () => {
	ElMessageBox({
		closeOnClickModal: false,
		closeOnPressEscape: false,
		title: t('user.logOutTitle'),
		message: t('user.logOutMessage'),
		showCancelButton: true,
		confirmButtonText: t('user.logOutConfirm'),
		cancelButtonText: t('user.logOutCancel'),
		buttonSize: 'default',
		beforeClose: (action, instance, done) => {
			if (action === 'confirm') {
				instance.confirmButtonLoading = true;
				instance.confirmButtonText = t('user.logOutExit');
				console.log('询问', instance);
				setTimeout(() => {
					done();
					setTimeout(() => {
						instance.confirmButtonLoading = false;
					}, 300);
				}, 700);
			} else {
				done();
			}
		},
	})
		.then(
			async () => {
				console.log('询问退出成功');
				await logout();
				// 清除缓存/token等
				Session.clear();
				// 使用 reload 时，不需要调用 resetRoute() 重置路由
				window.location.reload();
			},
			() => {
				console.log('询问退出取消');
			}
		)
		.catch((e) => {
			console.log('询问退出报错', e);
		});
};

onMounted(()=>{
    NextLoading.done();
});  
</script>

<style scoped lang='scss'>
.pixiContainer {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
	background: url('/@/assets/dashboard/bg.png') no-repeat;
	min-height: 100vh;
	width: '100%';
	background-size: 100% 100%;
	color: #fff;
	.topHead {
		height: 100px;
		background: url('/@/assets/dashboard/top_bg.png');
		background-size: 100% 100%;
		width: 100%;
		box-sizing: border-box;
		.sysName {
			width: 100%;
			height: 100%;
			background: url('/@/assets/dashboard/top_logo.png') top 23px center no-repeat;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #fff;
			font-size: 18px;
		}
	}
	.mainWrap {
		display: flex;
		box-sizing: border-box;
		width: 100vw;
		height: calc(100vh - 84px);
		padding: 20px;
		padding-top: 0;
	}
    .timeNow {
		width: 285px;
		height: 51px;
		background: url('/@/assets/dashboard/top_lbg_1.png') no-repeat;
		background-size: contain;
		margin-top: 15px;
		text-align: center;
		line-height: 40px;
	}
	.rightPart {
		display: flex;
        .partModule {
		width: 222px;
		height: 51px;
		background: url('/@/assets/dashboard/top_lbg_2.png') no-repeat;
		background-size: contain;
		margin-top: 15px;
		text-align: center;
		line-height: 40px;
		cursor: pointer;
	    }
	}
}
</style>
